<template>
  <div class="m-navbar">
    <div class="m-navbar__inner">
      <div class="left">
        <button v-if="showBack" class="back-btn" @click="onBack">
          <svg class="icon-back" viewBox="0 0 24 24" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <slot name="left"></slot>
      </div>
      <div class="m-navbar__title">{{ title }}</div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({ title: { type: String, default: '' }, back: { type: [Boolean, String], default: 'auto' } })
const router = useRouter()
const showBack = computed(()=> props.back === true || (props.back !== false && window.history.length > 1))
function onBack(){ if (window.history.length > 1) router.back(); else router.push('/') }
</script>

<style scoped>
.m-navbar { position: sticky; top: 0; z-index: 99; background: #fff; border-bottom: 1px solid var(--border-color); }
.m-navbar__inner { height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.m-navbar__title { font-size: 18px; font-weight: 700; color: var(--text-color); }
.left, .right { width: 120px; display: flex; align-items: center; }
.right { justify-content: flex-end; }
.back-btn{ width: 36px; height: 36px; border-radius: 8px; display:flex; align-items:center; justify-content:center; margin-right: 8px; background: var(--bg-card); border:1px solid var(--border-color); }
.icon-back{ color: var(--text-color); }
</style>

